<link href="/media/css/Title_white.css" rel="stylesheet" type="text/css" />
{% extends 'base.html' %}
{% block title %} - New / Delete user{% endblock %}
{% block content %}
<script>
	$().ready(function(){	
        $('#exp_start').datepicker({
            dateFormat: 'yy-mm-dd'
        });
        
        $('#exp_end').datepicker({
            dateFormat: 'yy-mm-dd'
        });    
	});
	
	var old_tools = new Array();
	var old_skills = new Array();
	var old_tags = new Array();

	/* Check whether the upload file is a picture. */
	function check_img(img_form){
		var location = img_form.user_video.value;
		if (location != ""){
			var point = location.lastIndexOf(".");
			var type = location.substr(point);

			if(type==".mp4"||type==".mov"||type==".swf"||type==".flv"||type==".MP4"||type==".MOV"||type==".SWF"||type==".FLV"){
				return true;
			}else{
				alert("Please chose videos in format : mov mp4 flv");
				return false;
			}
		}

		var location = img_form.user_photo.value;
		if (location != "") {
			var point = location.lastIndexOf(".");
			var type = location.substr(point);

			if(type==".jpg"||type==".gif"||type==".JPG"||type==".GIF"||type==".PNG"||type==".png"){
				return true;
			}else{
				alert("Please chose image in format : jpg png gif");
				return false;
			}
		}

		return true;
	}

	function show_array(_array, _old_array, _old_array_name, _html_id){
		var _html = '';
		for (var i=0;i<_array.length;i++){
			if (_array[2*i]){
				_html += "<input type='checkbox' value ='"+_array[2*i]+"' onmousedown=\"show_skt("
				+ _array[i*2]+",'" + _array[i*2+1] + "', "+_old_array_name+");\"";
				for (var j = 0;j<_old_array.length; j++){
					if (_old_array[j] == _array[i*2])
					_html += " checked='true' ";
				}
				_html += ">" + _array[i*2+1] + "<br/>";
			}
		}
		document.getElementById(_html_id).innerHTML = _html;
	}

	/*Show all the skills, tools and tags grouped by categories.*/
	function show_skill_tool_tag(tools, skills, tags){
		show_array(tools, old_tools, 'old_tools', '_tools');
		show_array(skills, old_skills, 'old_skills','_skills');
		show_array(tags, old_tags, 'old_tags','_tags');
	}

	function show_skt(_id, _name, _array){
		for(i=0;i<_array.length;i++){
			if (_id==_array[i]){
				_remove(_id,_array);
				_final_s_t_t();

				return ;
			}
		}

		_array.push(_id);
		_final_s_t_t();
	}

	/*Process with unselect skills, tools, tags.*/
	function _remove(_id, _array){
		for (i=0;i<_array.length;i++){
			if (_array[i]==_id){
				_array[i] = _array[_array.length - 1];
				_array.pop();
			}
		}

	}

	function push(_array, val){
		for (var i=0;i<_array.length;i++){
			if (_array[i]==val)
			return;
		}

		_array.push(val);
	}

	function check_all( tools, skills, tags){
		for (var i=0;i<skills.length/2;i++){
			push(old_skills, skills[i*2]);
		}

		for (var i=0;i<tools.length/2;i++){
			push(old_tools, tools[i*2]);
		}

		for (var i=0;i<tags.length/2;i++){
			push(old_tags, tags[i*2]);
		}

		// All check.
		show_skill_tool_tag(tools, skills, tags);
		_final_s_t_t();
	}

	function uncheck_all(tools, skills, tags){
		for (var i=0;i<skills.length/2;i++){
			_remove(skills[i*2], old_skills);
		}

		for (var i=0;i<tools.length/2;i++){
			_remove(tools[i*2], old_tools);
		}

		for (var i=0;i<tags.length/2;i++){
			_remove(tags[i*2], old_tags);
		}

		// All uncheck.
		show_skill_tool_tag(tools, skills, tags);
		_final_s_t_t();
	}

	/* Generate the final input skills, tools, tags. */
	function _final_s_t_t(){
		var tag_html = "";
		var tool_html = "";
		var skill_html = "";
		for(var i=0;i<old_tools.length;i++){
			tool_html += "<input checked='true' type='checkbox' name='final_tool' value='" + old_tools[i] +"'>";
		}

		for(var i=0;i<old_skills.length;i++){
			skill_html += "<input checked='true' type='checkbox' name='final_skill' value='" + old_skills[i] +"'>";
		}

		for(var i=0;i<old_tags.length;i++){
			tag_html += "<input checked='true' type='checkbox' name='final_tag' value='" + old_tags[i] +"'>";
		}

		document.getElementById('_final').innerHTML = tool_html + skill_html + tag_html;
	}
</script>

<div id="content" style="position:absolute; top:20px; left:0px; width:610px; height:relative; background-color: #1A1A1A; layer-background-color: #1A1A1A; border: 1px none #000000;">



<form enctype="multipart/form-data" method="post" action="/user/new/" onsubmit="return check_img(this);">
	<table width="610">
  		<tr>
  		  <td colspan="2"><p><span style="font-size:14px;color:#CCC">Create new user</span></p></td></tr>
    
		{{form}}
	     <tr><td colspan="2">
        </td></tr>
        </table>
        
        <table width="610">
		<tr>
			<td width="114">Company:</td>
			<td><input type="text"  maxlength="30" name="company"></td>
		
			<td>Office:</td>
            <td><input type="text"  maxlength="30" name="office"></td>
		</tr>
        <tr>
			<td>Job Title:</td>
			<td><input type="text"  maxlength="30" name="role"></td>

			<td>Phone:</td>
			<td><input type="text" maxlength="100" name="phone"/></td>
		</tr>
		<tr>
			<td>Address:</td>
			<td><input type="text"  maxlength="100" name="address"></td>

			<td>URL:</td>
            <td><input type="text" maxlength="100" name="link"></td>
		</tr>
		<tr>
        <tr><td colspan="4">
        </td></tr>
			<td>Rate:</td>
			<td colspan="3"><input type="text"  maxlength="10" name="rate"></td>
        </tr>
        <tr>
			<td>Unavailable from:</td>
			<td>
				<input type="text" readonly="readonly" id="exp_start" name="exp_start" value="{% if user_expire.start %}{{user_expire.start}}{% endif %}">
				<a href="#" onclick="$('#exp_start').val(''); return false;">X</a>
			</td>
		
			<td width="57">to:</td>
			<td width="170">
				<input type="text" readonly="readonly" name="exp_end"  id="exp_end" value="{% if user_expire.end %}{{user_expire.end}}{% endif %}">
				<a href="#" onclick="$('#exp_end').val(''); return false;">X</a>
			</td>
		</tr>
        <tr><td colspan="4">
        </td></tr>
        
       	<tr>
			<td>Language:</td>
			<td><input type="text"  maxlength="10" name="language"></td>
            
            <td>Note:</td>
			<td><input type="text" maxlength="100" name="note"/></td>
		</tr>
        <tr>
			<td>Photo:</td>
			<td colspan="3"><input type="file" name="user_photo"/></td>
		</tr>
		<tr>
			<td>Upload a video:</td>
			<td colspan="3"><input type="file" name="user_video"/></td>
		</tr>
        <tr>
		<td colspan="4">
				<div style="float:left;left:2px;WIDTH:290px;HEIGHT:190px;word-wrap:break-word;OVERFLOW:auto;overflow-x:hidden;border:1px solid #7e7d68;top:40px;scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF;scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222;scrollbar-arrow-color: #222222">
					<div style="position:relative;left:5px;top:5px;">
                    <b>Category</b> <br/>
						{% for x in skts %}
						<input type="checkbox" name="c_a_t_radio" value="{{x.category.id}}"
                        onclick="$(this).css('color','white').siblings().css('color','');"
						onmousedown="if(this.checked) uncheck_all([{% for y in x.tools %}'{{y.id}}','{{y.name}}',{% endfor %}],
							[{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
							[{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]); else 
							show_skill_tool_tag([{% for y in x.tools %}'{{y.id}}','{{y.name}}',{% endfor %}],
							[{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
							[{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);"
						/>
						<a href="#" id="{{y.name}}"onclick="show_skill_tool_tag([{% for y in x.tools %}'{{y.id}}','{{y.name}}',{% endfor %}],
							[{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
							[{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);$(this).css('color','white').siblings().css('color','');">
                            
							{{x.category.name}}
						</a><br/>
						{% endfor %}
					</div>
				</div>

				<div style="float:left;left:300px;top:335px;WIDTH:290px;HEIGHT:190px;word-wrap:break-word;OVERFLOW:auto;overflow-x:hidden;border:1px solid #7e7d68;scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF;scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222;scrollbar-arrow-color: #222222">
					<div class="text_white" style="position:relative;left:5px;top:5px;">
						<b>Skill</b> <br/>
						<div id="_skills"></div>
					</div> <br/>

					<div style="position:relative;left:5px;top:5px;">
						<b>Tools</b> <br/>
						<div id="_tools"></div>
					</div> <br/>

					<div style="position:relative;left:5px;top:5px;display:none">
						<b>Tags</b> <br/><br/>
						<div id="_tags">
					</div>
					<div style="display:none" id="_final">
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td align="right" colspan="4">
            
				<input type="submit" align="center" value="Create" />

			</td>
		</tr>
	</table>
</form>
{% if perms.users.is_kth %}
<p><span style="font-size:14px">Delete User</span></p>
<form method="post" action="/user/delete/">
	<table width="610">
		{% for field in form_delete %}
		<td width="100">User:</td>
		<td>{{field}}</td>
		<td align="right">
			<a onclick="return confirm('Delete this user?');">
				<input type="submit" value="Delete" />
			</a>
		</td>
		{% endfor %}
	</table>
</form>
{% endif %}
<table width="610"><tr><td>
<FORM><INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"> </FORM>
</td></tr></table>
</div>

{% endblock %}